VisaptveroÅ”a rokasgrÄmata par tÄ«mekļa piekļūstamÄ«bu, kas vÄrsta uz vietÅu optimizÄÅ”anu ekrÄna lasÄ«tÄjiem, lai nodroÅ”inÄtu iekļaujoÅ”u pieredzi visiem lietotÄjiem.
TÄ«mekļa PiekļūstamÄ«ba: JÅ«su Vietnes OptimizÄÅ”ana EkrÄna LasÄ«tÄju LietotÄjiem
MÅ«sdienu digitÄlajÄ laikmetÄ tÄ«mekļa piekļūstamÄ«ba nav tikai vÄlama Ä«paŔība; tÄ ir pamatprasÄ«ba. Piekļūstama vietne nodroÅ”ina, ka cilvÄki ar invaliditÄti, ieskaitot tos, kas paļaujas uz ekrÄna lasÄ«tÄjiem, var uztvert, saprast, pÄrvietoties un mijiedarboties ar tÄ«mekli.
Å Ä« visaptveroÅ”Ä rokasgrÄmata detalizÄti aplÅ«kos jÅ«su vietnes optimizÄÅ”anas specifiku ekrÄna lasÄ«tÄju lietotÄjiem, aptverot bÅ«tiskÄkÄs tehnikas, labÄko praksi un reÄlÄs dzÄ«ves piemÄrus.
Kas ir EkrÄna LasÄ«tÄjs?
EkrÄna lasÄ«tÄjs ir palÄ«gtehnoloÄ£ija, kas pÄrvÄrÅ” tekstu un citus elementus datora ekrÄnÄ runas vai Braila raksta izvadÄ. Tas ļauj cilvÄkiem ar redzes traucÄjumiem piekļūt digitÄlajam saturam un ar to mijiedarboties. PopulÄri ekrÄna lasÄ«tÄji ir:
- JAWS (Job Access With Speech): PlaÅ”i izmantots ekrÄna lasÄ«tÄjs operÄtÄjsistÄmai Windows.
- NVDA (NonVisual Desktop Access): Bezmaksas un atvÄrtÄ pirmkoda ekrÄna lasÄ«tÄjs operÄtÄjsistÄmai Windows.
- VoiceOver: Apple iebÅ«vÄtais ekrÄna lasÄ«tÄjs macOS un iOS sistÄmÄm.
- ChromeVox: EkrÄna lasÄ«tÄja paplaÅ”inÄjums pÄrlÅ«kam Google Chrome un Chrome OS.
- Orca: Bezmaksas un atvÄrtÄ pirmkoda ekrÄna lasÄ«tÄjs operÄtÄjsistÄmai Linux.
EkrÄna lasÄ«tÄji darbojas, interpretÄjot vietnes pamatkodu un sniedzot lietotÄjam informÄciju par saturu un struktÅ«ru. Ir bÅ«tiski, lai vietnes bÅ«tu strukturÄtas tÄ, lai ekrÄna lasÄ«tÄji tÄs varÄtu viegli saprast un tajÄs pÄrvietoties.
KÄpÄc EkrÄna LasÄ«tÄja OptimizÄcija ir SvarÄ«ga?
Vietnes optimizÄÅ”ana ekrÄna lasÄ«tÄjiem sniedz daudzas priekÅ”rocÄ«bas:
- IekļauÅ”ana: NodroÅ”ina, ka lietotÄji ar redzes traucÄjumiem var efektÄ«vi piekļūt jÅ«su vietnei un to izmantot.
- AtbilstÄ«ba LikumdoÅ”anai: DaudzÄs valstÄ«s ir likumi un noteikumi, kas pieprasa tÄ«mekļa piekļūstamÄ«bu (piem., AmerikÄÅu ar invaliditÄti akts (ADA) Amerikas SavienotajÄs ValstÄ«s, PiekļūstamÄ«bas likums ontarieÅ”iem ar invaliditÄti (AODA) KanÄdÄ un EN 301 549 EiropÄ).
- Uzlabota LietotÄja Pieredze: Piekļūstams dizains bieži vien nodroÅ”ina labÄku lietotÄja pieredzi visiem lietotÄjiem, neatkarÄ«gi no invaliditÄtes.
- PlaÅ”Äka Auditorijas SasniedzamÄ«ba: Padarot savu vietni piekļūstamu, jÅ«s to atverat plaÅ”Äkai potenciÄlajai auditorijai.
- SEO PriekÅ”rocÄ«bas: MeklÄtÄjprogrammas dod priekÅ”roku piekļūstamÄm vietnÄm, kas var uzlabot jÅ«su pozÄ«cijas meklÄÅ”anas rezultÄtos.
EkrÄna LasÄ«tÄja OptimizÄcijas Galvenie Principi
Å ie principi ir bÅ«tiski, lai izveidotu ekrÄna lasÄ«tÄjiem draudzÄ«gas vietnes:
1. Semantiskais HTML
Pareiza semantisko HTML elementu lietoÅ”ana ir izŔķiroÅ”a, lai pieŔķirtu jÅ«su saturam struktÅ«ru un nozÄ«mi. Semantiskie elementi nodod ekrÄna lasÄ«tÄjiem informÄciju par dažÄdu jÅ«su vietnes daļu mÄrÄ·i, ļaujot lietotÄjiem efektÄ«vÄk pÄrvietoties.
PiemÄri:
- Lietojiet
<header>vietnes galvenei. - Lietojiet
<nav>navigÄcijas izvÄlnÄm. - Lietojiet
<main>galvenÄ satura apgabalam. - Lietojiet
<article>, lai ietvertu neatkarīgus satura blokus. - Lietojiet
<aside>papildinoŔam saturam. - Lietojiet
<footer>vietnes kÄjenei. - Lietojiet
<h1>līdz<h6>virsrakstiem. - Lietojiet
<p>rindkopÄm. - Lietojiet
<ul>un<ol>sarakstiem.
Koda piemÄrs:
<header>
<h1>Mana Vietne</h1>
<nav>
<ul>
<li><a href="#">SÄkums</a></li>
<li><a href="#">Par mums</a></li>
<li><a href="#">Pakalpojumi</a></li>
<li><a href="#">Kontakti</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Raksta virsraksts</h2>
<p>Å is ir raksta galvenais saturs.</p>
</article>
</main>
<footer>
<p>Autortiesības 2023</p>
</footer>
2. AlternatÄ«vais Teksts AttÄliem
AttÄliem vienmÄr ir jÄbÅ«t aprakstoÅ”am alternatÄ«vajam tekstam (alt tekstam), kas nodod attÄla saturu un mÄrÄ·i ekrÄna lasÄ«tÄju lietotÄjiem. Alt tekstam jÄbÅ«t kodolÄ«gam un informatÄ«vam.
LabÄkÄ prakse:
- NodroÅ”iniet alt tekstu visiem attÄliem, ieskaitot dekoratÄ«vos.
- Alt tekstam jÄbÅ«t Ä«sam un aprakstoÅ”am.
- Izvairieties no frÄzÄm kÄ "attÄls ar" vai "bilde ar".
- Sarežģītiem attÄliem apsveriet iespÄju izmantot garu aprakstu (
longdescatribÅ«tu vai atseviŔķu aprakstoÅ”u tekstu). - Ja attÄls ir tÄ«ri dekoratÄ«vs un nepievieno nozÄ«mi, izmantojiet tukÅ”u alt atribÅ«tu (
alt=""), lai ekrÄna lasÄ«tÄji to neizziÅotu.
Koda piemÄrs:
<img src="logo.png" alt="UzÅÄmuma logo">
<img src="decorative.png" alt="">
3. ARIA Atribūti
ARIA (Accessible Rich Internet Applications) atribÅ«ti nodroÅ”ina ekrÄna lasÄ«tÄjiem papildu informÄciju par elementu lomu, stÄvokli un Ä«paŔībÄm, Ä«paÅ”i attiecÄ«bÄ uz dinamisku saturu un sarežģītiem logrÄ«kiem. ARIA atribÅ«ti var uzlabot piekļūstamÄ«bu, ja ar semantisko HTML vien nepietiek.
BiežÄk lietotie ARIA atribÅ«ti:
- role: DefinÄ elementa lomu (piem.,
role="button",role="navigation"). - aria-label: NodroÅ”ina teksta etiÄ·eti elementam, ja vizuÄla etiÄ·ete nav pieejama vai pietiekama.
- aria-labelledby: Saista elementu ar citu elementu, kas kalpo kÄ tÄ etiÄ·ete.
- aria-describedby: Saista elementu ar citu elementu, kas nodroÅ”ina tÄ aprakstu.
- aria-hidden: PaslÄpj elementu no ekrÄna lasÄ«tÄjiem.
- aria-live: NorÄda, ka elementa saturs tiek dinamiski atjauninÄts (piem.,
aria-live="polite",aria-live="assertive"). - aria-expanded: NorÄda, vai saliekams elements paÅ”laik ir izvÄrsts vai sakļauts.
- aria-haspopup: NorÄda, ka elementam ir uznirstoÅ”Ä izvÄlne.
Koda piemÄrs:
<button role="button" aria-label="AizvÄrt dialogu" onclick="closeDialog()">X</button>
<div id="description">Å is ir attÄla apraksts.</div>
<img src="example.jpg" aria-describedby="description" alt="PiemÄra attÄls">
SvarÄ«ga piezÄ«me: Lietojiet ARIA atribÅ«tus apdomÄ«gi. PÄrmÄrÄ«ga ARIA lietoÅ”ana var radÄ«t piekļūstamÄ«bas problÄmas. VienmÄr vispirms izmantojiet semantiskos HTML elementus un lietojiet ARIA tikai tad, ja tas ir nepiecieÅ”ams, lai papildinÄtu vai ignorÄtu noklusÄjuma semantiku.
4. NavigÄcija ar TastatÅ«ru
PÄrliecinieties, ka visi interaktÄ«vie elementi jÅ«su vietnÄ ir navigÄjami, izmantojot tikai tastatÅ«ru. Tas ir bÅ«tiski lietotÄjiem, kuri nevar izmantot peli vai citu rÄdÄ«tÄjierÄ«ci. NavigÄcija ar tastatÅ«ru lielÄ mÄrÄ balstÄs uz pareizu fokusa indikatoru lietoÅ”anu un loÄ£isku tabulÄÅ”anas secÄ«bu.
LabÄkÄ prakse:
- Fokusa Indikatori: PÄrliecinieties, ka visiem interaktÄ«vajiem elementiem (piem., saitÄm, pogÄm, formas laukiem) ir skaidrs un redzams fokusa indikators, kad tie ir atlasÄ«ti. Izmantojiet CSS, lai stilizÄtu
:focusstÄvokli. - TabulÄÅ”anas SecÄ«ba: TabulÄÅ”anas secÄ«bai jÄatbilst loÄ£iskajai lapas lasÄ«Å”anas secÄ«bai (parasti no kreisÄs uz labo, no augÅ”as uz leju). Izmantojiet
tabindexatribÅ«tu, lai pielÄgotu tabulÄÅ”anas secÄ«bu, ja nepiecieÅ”ams. Izvairieties notabindex="0"untabindex="-1"lietoÅ”anas, ja vien tas nav absolÅ«ti nepiecieÅ”ams, jo nepareizi lietojot, tie var radÄ«t piekļūstamÄ«bas problÄmas. - NavigÄcijas IzlaiÅ”anas Saites: Lapas augÅ”pusÄ nodroÅ”iniet saiti "izlaist navigÄciju", kas ļauj lietotÄjiem apiet galveno navigÄcijas izvÄlni un pÄriet tieÅ”i uz galveno saturu. Tas ir Ä«paÅ”i noderÄ«gi lietotÄjiem, kuri izmanto ekrÄna lasÄ«tÄjus, jo tas samazina nepiecieÅ”amÄ«bu katrÄ lapÄ pÄrvietoties pa atkÄrtotÄm navigÄcijas saitÄm.
- ModÄlie Dialogi: Atverot modÄlo dialogu, nodroÅ”iniet, ka fokuss ir "iesprostots" dialoga iekÅ”ienÄ, lÄ«dz tas tiek aizvÄrts. Neļaujiet lietotÄjiem ar tabulÄÅ”anas taustiÅu iziet Ärpus dialoga.
Koda piemÄrs (NavigÄcijas IzlaiÅ”anas Saite):
<a href="#main-content" class="skip-link">PÄriet uz galveno saturu</a>
<header>
<nav>
<!-- NavigÄcijas IzvÄlne -->
</nav>
</header>
<main id="main-content">
<!-- Galvenais Saturs -->
</main>
Koda piemÄrs (CSS Fokusa Indikatoram):
a:focus, button:focus, input:focus, textarea:focus, select:focus {
outline: 2px solid blue;
outline-offset: 2px;
}
5. Formu Piekļūstamība
Formas ir bÅ«tiska daudzu vietÅu sastÄvdaļa, un ir svarÄ«gi nodroÅ”inÄt, lai tÄs bÅ«tu piekļūstamas ekrÄna lasÄ«tÄju lietotÄjiem. Pareiza etiÄ·eÅ”u pievienoÅ”ana, skaidras instrukcijas un kļūdu apstrÄde ir izŔķiroÅ”as formu piekļūstamÄ«bai.
LabÄkÄ prakse:
- EtiÄ·etes: Izmantojiet
<label>elementu, lai saistÄ«tu etiÄ·etes ar formas laukiem.<label>elementaforatribÅ«tam jÄsakrÄ«t ar atbilstoÅ”Ä formas laukaidatribÅ«tu. - Instrukcijas: Sniedziet skaidras un kodolÄ«gas instrukcijas formas aizpildÄ«Å”anai. Izmantojiet
aria-describedbyatribÅ«tu, lai saistÄ«tu instrukcijas ar formas laukiem. - Kļūdu ApstrÄde: RÄdiet kļūdu paziÅojumus skaidri un pamanÄmi. Izmantojiet
aria-liveatribÅ«tu, lai paziÅotu kļūdu ziÅojumus ekrÄna lasÄ«tÄju lietotÄjiem. Saistiet kļūdu paziÅojumus ar atbilstoÅ”ajiem formas laukiem, izmantojotaria-describedbyatribÅ«tu. - ObligÄtie Lauki: Skaidri norÄdiet obligÄtos laukus gan vizuÄli, gan programmatiski. Izmantojiet
requiredatribÅ«tu, lai atzÄ«mÄtu obligÄtos laukus. Izmantojietaria-requiredatribÅ«tu, lai norÄdÄ«tu ekrÄna lasÄ«tÄju lietotÄjiem, ka lauks ir obligÄts. - SaistÄ«to Lauku GrupÄÅ”ana: Izmantojiet
<fieldset>un<legend>elementus, lai grupÄtu saistÄ«tus formas laukus.
Koda piemÄrs:
<label for="name">VÄrds:</label>
<input type="text" id="name" name="name" required aria-required="true">
<div id="name-instructions">LÅ«dzu, ievadiet savu pilno vÄrdu.</div>
<label for="name">VÄrds:</label>
<input type="text" id="name" name="name" aria-describedby="name-instructions">
<form>
<fieldset>
<legend>KontaktinformÄcija</legend>
<label for="email">E-pasts:</label>
<input type="email" id="email" name="email" required aria-required="true"><br><br>
<label for="phone">TÄlrunis:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form>
6. DinamiskÄ Satura PiekļūstamÄ«ba
Kad saturs jÅ«su vietnÄ mainÄs dinamiski (piem., izmantojot AJAX vai JavaScript), ir svarÄ«gi nodroÅ”inÄt, ka ekrÄna lasÄ«tÄju lietotÄji tiek informÄti par izmaiÅÄm. Izmantojiet ARIA "dzÄ«vos reÄ£ionus" (live regions), lai paziÅotu par dinamiskÄ satura atjauninÄjumiem.
ARIA "Dzīvie Reģioni":
- aria-live="off": NoklusÄjuma vÄrtÄ«ba. AtjauninÄjumi reÄ£ionÄ netiek paziÅoti.
- aria-live="polite": PaziÅo par atjauninÄjumiem, kad lietotÄjs ir neaktÄ«vs. Å Ä« ir visizplatÄ«tÄkÄ un ieteicamÄkÄ vÄrtÄ«ba.
- aria-live="assertive": PaziÅo par atjauninÄjumiem nekavÄjoties, pÄrtraucot lietotÄju. Lietojiet Å”o vÄrtÄ«bu reti, jo tÄ var bÅ«t traucÄjoÅ”a.
Koda piemÄrs:
<div aria-live="polite" id="status-message"></div>
<script>
// Kad saturs tiek atjauninÄts, atjauniniet statusa ziÅojumu
document.getElementById('status-message').textContent = "Saturs veiksmÄ«gi atjauninÄts!";
</script>
7. KrÄsu Kontrasts
PÄrliecinieties, ka starp teksta un fona krÄsÄm ir pietiekams krÄsu kontrasts. Tas ir svarÄ«gi lietotÄjiem ar vÄjredzÄ«bu vai krÄsu aklumu. TÄ«mekļa Satura PiekļūstamÄ«bas VadlÄ«nijas (WCAG) nosaka kontrasta attiecÄ«bu vismaz 4.5:1 normÄlam tekstam un 3:1 lielam tekstam.
RÄ«ki KrÄsu Kontrasta PÄrbaudei:
- WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker/)
- Coolors (coolors.co)
- Adobe Color (color.adobe.com)
8. Multivides Piekļūstamība
Ja jÅ«su vietnÄ ir audio vai video saturs, nodroÅ”iniet alternatÄ«vas lietotÄjiem, kuri nevar redzÄt vai dzirdÄt saturu. Tas ietver:
- Subtitri: NodroÅ”iniet subtitrus visam video saturam. Subtitri ir sinhronizÄti audio celiÅa teksta atÅ”ifrÄjumi.
- Transkripti: NodroÅ”iniet teksta atÅ”ifrÄjumus visam audio un video saturam. Transkriptos jÄiekļauj viss runÄtais saturs, kÄ arÄ« svarÄ«gu skaÅu un vizuÄlo elementu apraksti.
- Audio Apraksti: NodroÅ”iniet audio aprakstus video saturam. Audio apraksti stÄsta par video vizuÄlajiem elementiem lietotÄjiem, kuri ir akli vai vÄjredzÄ«gi.
9. TestÄÅ”ana ar EkrÄna LasÄ«tÄjiem
VisefektÄ«vÄkais veids, kÄ nodroÅ”inÄt, ka jÅ«su vietne ir piekļūstama ekrÄna lasÄ«tÄju lietotÄjiem, ir to testÄt ar dažÄdiem ekrÄna lasÄ«tÄjiem. Tas palÄ«dzÄs jums identificÄt un novÄrst visas iespÄjamÄs piekļūstamÄ«bas problÄmas.
TestÄÅ”anas RÄ«ki:
- ManuÄlÄ TestÄÅ”ana: Izmantojiet ekrÄna lasÄ«tÄjus, piemÄram, NVDA (bezmaksas), JAWS (maksas) vai VoiceOver (iebÅ«vÄts macOS un iOS), lai pÄrvietotos pa savu vietni. MÄÄ£iniet veikt biežÄkÄs darbÄ«bas un mijiedarbÄ«bas.
- AutomatizÄtÄ TestÄÅ”ana: Izmantojiet piekļūstamÄ«bas testÄÅ”anas rÄ«kus, lai identificÄtu potenciÄlÄs piekļūstamÄ«bas problÄmas. Å ie rÄ«ki var palÄ«dzÄt atklÄt biežÄkÄs kļūdas, taÄu tos nevajadzÄtu izmantot kÄ manuÄlÄs testÄÅ”anas aizstÄjÄju. Daži populÄri piekļūstamÄ«bas testÄÅ”anas rÄ«ki ietver:
- WAVE (Web Accessibility Evaluation Tool)
- axe DevTools
- Lighthouse (Chrome DevTools)
Padomi TestÄÅ”anai ar EkrÄna LasÄ«tÄjiem:
- ApgÅ«stiet Pamatus: IepazÄ«stieties ar izmantotÄ ekrÄna lasÄ«tÄja pamatkomandÄm un navigÄcijas tehnikÄm.
- Izmantojiet DažÄdus EkrÄna LasÄ«tÄjus: PÄrbaudiet savu vietni ar dažÄdiem ekrÄna lasÄ«tÄjiem, jo katrs ekrÄna lasÄ«tÄjs interpretÄ tÄ«mekļa saturu atŔķirÄ«gi.
- Iesaistiet LietotÄjus ar InvaliditÄti: LabÄkais veids, kÄ nodroÅ”inÄt, ka jÅ«su vietne ir piekļūstama, ir iesaistÄ«t lietotÄjus ar invaliditÄti testÄÅ”anas procesÄ. SaÅemiet atsauksmes no ekrÄna lasÄ«tÄju lietotÄjiem par jÅ«su vietnes lietojamÄ«bu un piekļūstamÄ«bu.
WCAG (Tīmekļa Satura Piekļūstamības Vadlīnijas)
TÄ«mekļa Satura PiekļūstamÄ«bas VadlÄ«nijas (WCAG) ir starptautiski atzÄ«ts vadlÄ«niju kopums, kas paredzÄts tÄ«mekļa satura padarÄ«Å”anai piekļūstamÄkam. WCAG izstrÄdÄ Vispasaules TÄ«mekļa konsorcijs (W3C), un tÄs tiek plaÅ”i izmantotas kÄ tÄ«mekļa piekļūstamÄ«bas standarts.
WCAG ir organizÄtas ap Äetriem principiem, kas pazÄ«stami kÄ POUR:
- Uztverams: InformÄcijai un lietotÄja saskarnes komponentiem jÄbÅ«t pasniegtiem lietotÄjiem tÄdos veidos, kÄdus viÅi var uztvert.
- DarbÄ«bspÄjÄ«gs: LietotÄja saskarnes komponentiem un navigÄcijai jÄbÅ«t darbÄ«bspÄjÄ«giem.
- Saprotams: InformÄcijai un lietotÄja saskarnes darbÄ«bai jÄbÅ«t saprotamai.
- Robusta: Saturam jÄbÅ«t pietiekami robustam, lai to varÄtu uzticami interpretÄt dažÄdi lietotÄju aÄ£enti, tostarp palÄ«gtehnoloÄ£ijas.
WCAG ir sadalÄ«tas trÄ«s atbilstÄ«bas lÄ«meÅos: A, AA un AAA. A lÄ«menis ir visvienkÄrÅ”Äkais piekļūstamÄ«bas lÄ«menis, savukÄrt AAA lÄ«menis ir augstÄkais. LielÄkÄ daļa organizÄciju cenÅ”as atbilst AA lÄ«menim.
NoslÄgums
JÅ«su vietnes optimizÄÅ”ana ekrÄna lasÄ«tÄju lietotÄjiem ir bÅ«tisks solis ceÄ¼Ä uz patiesi iekļaujoÅ”as un piekļūstamas tieÅ”saistes pieredzes radÄ«Å”anu. IevÄrojot Å”ajÄ rokasgrÄmatÄ izklÄstÄ«tos principus un labÄko praksi, jÅ«s varat nodroÅ”inÄt, ka jÅ«su vietne ir pieejama visiem lietotÄjiem, neatkarÄ«gi no invaliditÄtes.
Atcerieties, ka tÄ«mekļa piekļūstamÄ«ba ir nepÄrtraukts process. RegulÄri pÄrbaudiet savu vietni ar ekrÄna lasÄ«tÄjiem un piekļūstamÄ«bas testÄÅ”anas rÄ«kiem un sekojiet lÄ«dzi jaunÄkajÄm piekļūstamÄ«bas vadlÄ«nijÄm un labÄkajai praksei. Padarot piekļūstamÄ«bu par prioritÄti, jÅ«s varat radÄ«t labÄku tÄ«mekli ikvienam.
Papildu Resursi:
- WebAIM: https://webaim.org/
- W3C Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
- Deque University: https://dequeuniversity.com/